<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <div class="search">
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                    <el-form-item label="选择日期">
                        <el-col :span="11">
                            <el-date-picker v-model="queryParams.startDate" placeholder="开始日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-col>
                        <el-col :span="2" class="text-center">
                            <span class="text-gray-500">-</span>
                        </el-col>
                        <el-col :span="11">
                            <el-date-picker v-model="queryParams.end" placeholder="结束日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="定稿状态" prop="inStatus">
                        <el-select v-model="queryParams.inStatus" clearable>
                            <el-option label="全部" value="0"></el-option>
                            <el-option label="已定稿" value="1"></el-option>
                            <el-option label="未定稿" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="烫金版" prop="isEdition">
                        <el-select v-model="queryParams.isEdition" clearable>
                            <el-option label="全部" value="0"></el-option>
                            <el-option label="已就绪" value="1"></el-option>
                            <el-option label="未就绪" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-row :gutter="8" class="mb8">
            <el-col  :span="1.5">
                <el-button type="success" icon="Filter" @click="handleAcceptOrders">接单</el-button>
            </el-col>
            <el-col  :span="1.5">
                <el-button type="primary"  icon="Share" @click="handleReinsurancePolicy">分单</el-button>
            </el-col>
            <el-col  :span="1.5">
                <el-button type="danger"  icon="CircleCheck" @click="handleFinalDraft">定稿</el-button>
            </el-col>
            <el-col  :span="1.5">
                <el-button type="warning"  icon="UserFilled" @click="handleBeReady">烫金版就绪</el-button>
            </el-col>
            <el-col  :span="1.5">
                <el-button color="#626aef"  icon="Upload" @click="handleHotUpload">烫金版上传</el-button>
            </el-col>
            <el-col  :span="1.5">
                <el-button type="success"  icon="Document" @click="handlOpenDetails">订单详情</el-button>
            </el-col>
        </el-row>

        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-form :model="queryParams" :inline="true">
                        <el-form-item label="模糊查询" prop="saleOrderCode">
                            <el-input v-model="queryParams.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>

                    <el-col :span="3">
                        <div  class="nav_text">未定稿: 100</div>
                    </el-col>
                    <el-col :span="1.5">
                        <div class="nav_text">未接单: 100</div>
                    </el-col>
                </el-row>

            </template>
            <el-table ref="multipleTableRef" :data="packageOrderList" stripe @selection-change="handleSelectionChange" >
                <el-table-column type="selection" width="55" />
                <el-table-column label="制单员" prop="inNumber" align="center"></el-table-column>
                <el-table-column label="客源渠道" prop="packingProductCode" align="center"></el-table-column>
                <el-table-column label="制单日期" prop="produceNumber" align="center"></el-table-column>
                <el-table-column label="交货日期" prop="inNumber" align="center"></el-table-column>
                <el-table-column label="销售单号" prop="inNumber" align="center"></el-table-column>
                <el-table-column label="L0G0名称" prop="inNumber" align="center">
                    <template #default="scope">
                       <div>CAKF</div>
                       <div>(5人份)</div>
                    </template>
                </el-table-column>
                <el-table-column label="产品名称" prop="inNumber" align="center"></el-table-column>
                <el-table-column label="订单数量" prop="inNumber" align="center"></el-table-column>
                <el-table-column label="单价" prop="inNumber" align="center"></el-table-column>
                <el-table-column label="订单金额" prop="inNumber" align="center"></el-table-column>
                <el-table-column label="备注" width="220px" prop="remark" align="center"></el-table-column>
                <el-table-column label="设计师" prop="inNumber"  align="center"></el-table-column>
                <el-table-column label="定稿" align="center">
                    <template #default="scope">
                        <span class="alert" v-if="scope.row.inStatus == '0'">未定稿</span>
                        <span class="normal" v-if="scope.row.inStatus == '1'"> 已定稿</span>
                    </template>
                </el-table-column>
                <el-table-column label="烫金版" align="center">
                    <template #default="scope">
                        <span class="alert" v-if="scope.row.inStatus == '0'">未就绪</span>
                        <span class="normal" v-if="scope.row.inStatus == '1'"> 已就绪</span>
                    </template>
                </el-table-column>
                <el-table-column label="已接单时间" align="center">
                    <template #default="scope">
                        <span class="warning" v-if="scope.row.inStatus == '0'">1天</span>
                        <span class="normal" v-if="scope.row.inStatus == '1'">3天</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getPackageList" />
        </el-card>
        <addSingle :visible="addSingleVisible" :initList="addSingleObj" @submit="handleSubmit" @close="handleCloseAdd" />
        <finalDraft :visible="finalDraftVisible" @submit="handleFinalDraftSubmit" @close="handleFinalDraftClose" />
        <orderDetail :visible="checkDetailVisible" :packageMethod="package_method" @close="handleCloseCheck"  />
        <hotStampingVersion :visible="stampingVisible" @submit="handleStampingSubmit" @close="handleStampingClose" />
        <hotUpload :visible="hotUploadVisible" @submit="handleHotUploadSubmit" @close="handleHotUploadClose" />

    </div>
</template>
<script setup lang="ts">
import { type FormInstance, TableInstance  } from 'element-plus';
import { QueryPackageType,PackageVO } from '@/api/sj/productManagement/packageOrder/types';
import { getPackageListApi, getPackageOrderDetailApi,deletePackageOrderApi,getPackageProduceOrderDetailApi, getApplyIngredientsDetailApi } from '@/api/sj/productManagement/packageOrder/index';
import addSingle from './components/addSingle.vue';
import finalDraft from './components/finalDraft.vue';
import orderDetail from './components/orderDetail.vue';
import hotStampingVersion from './components/hotStampingVersion.vue';
import hotUpload from './components/hotUpload.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { outlet_setting, package_method} = toRefs<any>(proxy?.useDict('outlet_setting','package_method'));
const queryFormRef = ref<FormInstance>();
const multipleTableRef = ref<TableInstance>()

const data = reactive<pageDataOnlyQuery<QueryPackageType>>({
    queryParams:{
        startDate: undefined,
        endDate: undefined,
        isEdition: undefined,
        inStatus: undefined,
        name: undefined,
        pageSize: 30,
        pageNum: 1
    }
});

const { queryParams } = toRefs(data);
const packageOrderList = ref<PackageVO[]>();
const totalData = ref(0);
const loading = ref(false);
const multipleSelection = ref<PackageVO[]>([])
const addSingleVisible = ref(false);
const addSingleObj = ref<PackageVO>()
const finalDraftVisible = ref(false);
const checkDetailVisible = ref(false);
const stampingVisible = ref(false);
const hotUploadVisible = ref(false);

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    // getPackageList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = undefined;
    queryParams.value.endDate = undefined;
    queryParams.value.name = undefined;
    // handleQuery();
};

const getPackageList = async () => {
    loading.value = true;
    const {code, rows, total} = await getPackageListApi(queryParams.value);
    if(code == 200){
        packageOrderList.value = rows;
        totalData.value = total;
        loading.value = false;
    };
};

/** 提交成功的操作 */
const handleSubmit = (result: boolean) => {
    if(result){
        proxy?.$modal.msgSuccess('成功');
        // getPackageList();
    };
};

// table 多选的回调
const handleSelectionChange = (val: PackageVO[]) => {
  multipleSelection.value = val
}

// 设计师接单
const handleAcceptOrders = () => {
    if(multipleSelection.value.length === 0) return proxy?.$modal.msgError('请选择单子');
    proxy?.$modal.msgSuccess('接单成功');
}

// 点击分单， 打开分单弹窗
const handleReinsurancePolicy = () => {
    if(multipleSelection.value.length === 0) return proxy?.$modal.msgError('请选择单子');
    if(multipleSelection.value.length > 1) return proxy?.$modal.msgError('请选择一个单子分单');

    proxy?.$modal.msgWarning('已经有设计师接单，无法分单');

    addSingleObj.value = multipleSelection.value[0]

    addSingleVisible.value = true;
}

// 关闭分单
const handleCloseAdd = () => {
    addSingleVisible.value = false;
};

// 烫金版就绪 点击事件
const handleBeReady = () => {
    if(multipleSelection.value.length === 0) return proxy?.$modal.msgError('请选择单子');

    // proxy?.$modal.msgWarning('未定稿，烫金版无法就绪');
    
    stampingVisible.value = true;
};

// 点击定稿 打开定稿弹窗
const handleFinalDraft = () => {
    if(multipleSelection.value.length === 0) return proxy?.$modal.msgError('请选择单子');
    if(multipleSelection.value.length > 1) return proxy?.$modal.msgError('请选择一个单子定稿');

    finalDraftVisible.value = true;
};

// 关闭定稿
const handleFinalDraftClose = () => {
    finalDraftVisible.value = false;
};

// 定稿确认
const handleFinalDraftSubmit = () => {
    finalDraftVisible.value = false;
};

// 打开详情
const handlOpenDetails = () => {
    if(multipleSelection.value.length === 0) return proxy?.$modal.msgError('请选择单子');
    if(multipleSelection.value.length > 1) return proxy?.$modal.msgError('请选择一个单子定稿');
    checkDetailVisible.value = true;
}

/** 关闭查看详情 */
const handleCloseCheck = () => {
    checkDetailVisible.value = false;
};

// 烫金版入库
const handleStampingSubmit = () => {
    stampingVisible.value = false;
};

// 关闭烫金版
const handleStampingClose = () => {
    stampingVisible.value = false;
};

const handleHotUpload = () => {
    hotUploadVisible.value = true;
}

// 烫金版上传
const handleHotUploadSubmit = () => {
    hotUploadVisible.value = false;
};

// 关闭烫金版上传
const handleHotUploadClose = () => {
    hotUploadVisible.value = false;
};

onMounted(()=>{
    getPackageList();
});

</script>
<style lang="scss" scoped>
.nav_text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 20px;
}
</style>